@use 'sass:map';
@use 'sass:color';

.lee-input {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;

  input,
  textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: var(--lee-font-size-base);
    font-family: var(--lee-font-family);
    color: var(--lee-text-color-primary);
    background-color: var(--lee-bg-color);
    border: var(--lee-border);
    border-radius: var(--lee-border-radius-base);
    outline: none;
    transition:
      border-color var(--lee-transition-duration-fast) ease,
      box-shadow var(--lee-transition-duration-fast) ease;

    // 鼠标悬停和 focus 样式
    &:hover {
      border-color: var(--lee-border-color-hover);
    }
    &:focus {
      border-color: var(--lee-color-primary);
      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
    }

    // 占位符样式
    &::placeholder {
      color: var(--lee-text-color-placeholder);
      opacity: 1; // 确保所有浏览器一致
    }

    // 禁用状态样式
    &:disabled {
      background-color: var(--lee-disabled-bg-color);
      color: var(--lee-disabled-text-color);
      border-color: var(--lee-disabled-border-color);
      cursor: not-allowed;
    }
    &.isPreIcon {
      padding: 0.5em 0.5em 0.5em 2.2em;
    }
    &.isSubIcon {
      padding: 0.5em 2.2em 0.5em 0.5em;
    }
  }

  // 输入框和多行文本框的差异化样式
  input {
    height: 2.5rem; // 适配单行输入框的高度
  }

  textarea {
    resize: vertical; // 允许垂直调整大小
  }

  input.input-large {
    height: 3rem;
  }
  input.input-small {
    height: 2rem;
  }
  .right-icon,
  .left-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 14px;
    color: #c0c4cc;
    transition: color 0.3s ease;
    cursor: pointer;
  }
  .right-icon {
    right: 10px;
  }
  .left-icon {
    left: 10px;
  }
  // 添加一些特殊的状态样式
  &.is-success input,
  &.is-success textarea {
    border-color: var(--lee-color-success);
  }

  &.is-warning input,
  &.is-warning textarea {
    border-color: var(--lee-color-warning);
  }

  &.is-error input,
  &.is-error textarea {
    border-color: var(--lee-color-danger);
  }
}
